<template>
  <div class="page-container">
    <div class="tab-list-wrapper">
      <ul class="tab-list">
        <li v-for="(item, i) of weekfree_list" :key="i" @click="onTabSelected(item, i)">
          <div class="image-wrapper" :class="{'selected': heroSelectedIndex === i}">
            <x-img :default-src="require('../../assets/images/default-card.png')" :src="item.headUrl" alt/>
          </div>
        </li>
      </ul>
    </div>
    <div class="hero-info" :style="{'background-image': `url(${heroSelected.pictureUrl})`}">
      <div class="basic">
        <div class="alias">{{heroSelected.nickname}}</div>
        <div class="name">{{heroSelected.realName}}</div>
        <div class="type">
          <img :src="heroTypeImage[heroSelected.heroType - 1]" alt="" srcset="">
        </div>
      </div>
      <div class="details">
        <!-- <div class="goto-details" @click="gotoHeroDetails">查看详情</div> -->
      </div>
    </div>
    <div class="skills-wrapper">
      <div class="title">
          <sword-icon :size="titleIconSize" :style="{'color':titleIconColor}"></sword-icon>
          <span>技能</span>  
      </div>
      <div class="skill-list">
        <ul>
          <li
            v-for="(item, i) of heroSelected.skillList"
            :key="i"
            @click="onSelectSkill(item, i)"
            :class="{'selected': skillSelectedIndex === i}"
          >
            <div class="icon">
              <x-img :default-src="require('../../assets/images/default-card.png')" :src="item.skillUrl" alt/>
              <!-- <img :src="item.skillUrl" alt> -->
            </div>
            <div class="name">
              <span>{{item.skillName}}</span>
            </div>
            <div class="type">
              <span>{{item.skillLevel | SkillType}}</span>
            </div>
          </li>
        </ul>
      </div>
      <div class="intro">
        <p>{{skillSelected.remark}}</p>
      </div>
    </div>
    <div class="equip-wrapper">
      <div class="title">
        <div class="left">
          <shield-half-full-icon :size="titleIconSize" :style="{'color':titleIconColor}"></shield-half-full-icon>
          <span>出装</span>  
        </div>
        <div class="right">
          <!-- 爆发收割 -->
        </div>
      </div>
      <div class="equip-list">
        <ul>
          <li v-for="(item, i) of heroSelected.equipmentList" :key="i" @click="showEquipRelation(item)">
            <!-- <img :src="item.equUrl" alt="" class="icon"> -->
              <x-img :default-src="require('../../assets/images/default-card.png')" :src="item.equUrl" class="icon" alt/>
          </li>
        </ul>
      </div>
    </div>
    <div class="ins-wrapper">
      <div class="title">
        <div class="left">
          <hexagon-slice-six-icon :size="titleIconSize" :style="{'color':titleIconColor}"></hexagon-slice-six-icon>
          <span>铭文</span>  
        </div>
        <div class="right">
          5级铭文推荐
        </div>
      </div>
      <div class="ins-list">
        <ul>
          <li v-for="(item, i) of heroSelected.insList" :key="i" @click="openInsDialog(item)">
            <img :src="item.insUrl" alt="" class="icon">
            <span class="name">5级<br/>{{item.insName}}</span>
          </li>
        </ul>
      </div>
    </div>

    <div class="dialog-wrapper" v-if="dialog">
      <div class="dialog">
        <div class="content">
          <div class="equip" v-if="dialogType === 1">
              <x-img :default-src="require('../../assets/images/default-card.png')" :src="item.relationUrl" class="icon" />
            <!-- <img :src="equipSelected.relationUrl" alt="" srcset=""> -->
          </div>
          <div class="ins" v-else>

          </div>
        </div>
        <div class="actions" @click="dialog = false">
          <close-circle-outline-icon :size="30"></close-circle-outline-icon>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { XImg } from 'vux';
export default {
  data() {
    return {
      titleIconSize: 20,
      titleIconColor: '#6f6f6f',
      dialog: false,
      dialogType: 1,
      heroSelectedIndex: 0,
      skillSelectedIndex: 0,
      skillSelected: {},
      heroSelected: {
        skillList: [],
        equipmentList: [],
        insList: []
      },
      // heroTypeImage: ['tank', 'WARRIOR', 'ASSASSIN', 'MAGE', 'ARCHER', 'ASSIST'],
      equipSelected: {},
      heroTypeImage: ['tank', 'warrior', 'assassin', 'mage', 'archer', 'support'].map((item)=>(require(`../../assets/images/herotype/${item}.png`))),
    };
  },
  computed: {
    ...mapState(['weekfree_list'])
  },
  mounted() {
    this.$nextTick(()=>{
      console.log('weekfree_list', this.weekfree_list)
      this.heroSelected = this.weekfree_list[0]
      this.skillSelected = this.weekfree_list[0].skillList[0];
    });
  },
  components:{XImg},
  methods: {
    onTabSelected(item, i) {
      
      this.heroSelectedIndex = i;
      this.heroSelected = item;
    },
    onSelectSkill(item, i) {
      this.skillSelectedIndex = i;
      this.skillSelected = item;
    },
    openInsDialog(item) {
      // this.dialog = true;

      this.dialogType = 2;
    },
    gotoHeroDetails() {
      this.$router.push({name: 'HeroDetails', params: {heroItem: this.heroSelected}});
    },
    showEquipRelation(item) {
      this.equipSelected = item;
      this.dialog = true;
      this.dialogType = 1;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.page-container {
  width: 100%;
  height: 100%;
  .tab-list-wrapper {
    background-color: #111;
    padding: 0.4rem 0;
    height: 3.3rem;
    width: 100%;
    overflow-x: scroll;
    .tab-list {
      display: flex;
      justify-content: flex-start;
      li {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        margin: 0 8px;
        .image-wrapper {
          padding: 2px;
          border-radius: 50%;
          img {
          border: 2px solid transparent;
          width: 2.8rem;
          height: 2.8rem;
          position: relative;
          border-radius: 50%;
        }
        }

        .image-wrapper.selected {
          img {
            border-color: #24a4d6;
          }
          &:after {
            display: block;
            content: "";
            border-width: 5px 6px 5px 6px;
            border-style: solid;
            border-color: #24a4d6 transparent transparent transparent;
            position: absolute;
            left: 40%;
            top: 3.12rem;
            z-index: 0;
          }
        }
      }
    }
  }
  .hero-info {
    display: flex;
    justify-content: center;
    height: 8rem;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    .basic {
      flex: 4;
      display: flex;
      flex-direction: column;
      background-color: rgba(0, 0, 0, 0.4);
      justify-content: flex-end;
      padding-bottom: 1rem;
      padding-left: .6rem;
      .alias {
        font-size: 0.7rem;
        color: #c0c0c0;
        // text-align: center;
      }
      .name {
        font-size: 1.3rem;
        // border-bottom: 1px dashed #999;
        color: white;
        // text-align: center;
        margin-bottom: .5rem;
      }
      .type {
        font-size: 0.7rem;
        color: #f0f0f0;
        // text-align: center;
        img {
          width: 3.4rem;
          height: 1.7rem;
        }
      }
    }
    .details {
      flex: 8;
      position: relative;
      .goto-details {
        position: absolute;
        writing-mode: vertical-rl;
        background-color: rgba(0, 0, 0, 0.4);
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        height: 4.5rem;
        width: 1.2rem;
        padding: 0.1rem;
        color: white;
        font-size: 0.7rem;
        bottom: 4px;
        text-align: center;
        line-height: 1.4rem;
      }
    }
  }
  .skills-wrapper {
    margin-top: .5rem;
    .title {
      font-size: 1.02rem;
      display: flex;
      margin-bottom: .9rem;
      .material-design-icon {
        margin-right: .5rem;
        
      }
    }
    .skill-list {
      height: 5rem;
      width: 100%;
      margin-bottom: 1rem;
      ul {
        display: flex;
        justify-content: space-around;
        align-items: center;
        li {
          flex: 1;
          display: flex;
          align-items: center;
          flex-direction: column;
          .icon {
            flex: 3;
            img {
              width: 3.6rem;
              height: 3.6rem;
              border-radius: 50%;
              filter: grayscale(1);
            }
          }
          .name {
            flex: 1;
            font-size: 0.7rem;
            color: #666;
          }
          .type {
            flex: 1;
            font-size: 0.7rem;
            color: #24a4d6;
            position: relative;
          }

          &.selected {
            .icon img {
              border-radius: 50%;
              filter: grayscale(0);
            }
            .name {
              color: #111;
            }
            // .type:after {
            //   content: "";
            //   display: block;
            //   border-width: 8px 8px 8px 8px;
            //   border-style: solid;
            //   border-color: transparent transparent rgba(0, 0, 0, 0.2)
            //     transparent;
            //   position: absolute;
            //   left: 0;
            //   top: 13px;
            // }
          }
        }
      }
    }
    .intro {
      padding: 6px 1rem;

      p {
        background-color: rgba(0, 0, 0, 0.12);
        font-size: 0.75rem;
        padding: 6px;
      }
    }
  }

  .equip-wrapper {
    margin-top: .6rem;
    margin-bottom: .6rem;
    .title {
      font-size: 1.02rem;
      display: flex;
      justify-content: space-between;
      margin-bottom: .6rem;
            .material-design-icon {
        margin-right: .5rem;
        
      }
      .left {
        display: flex;
        justify-content: center;
      }
      .right {
        font-size: 0.7rem;
      }
    }
    .equip-list {
      margin-top: 1rem;
      ul {
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 0 .68rem;
        li {
          .icon {
            width: 2.3rem;
            height: 2.3rem;
            border-radius: 50%;
          }
        }
      }
    }
  }
  .ins-wrapper {
    .title {
      font-size: 1.02rem;
      display: flex;
      justify-content: space-between;
            .material-design-icon {
        margin-right: .5rem;
        
      }
      .left {
        display: flex;
        justify-content: center;
      }
      .right {
        font-size: 0.7rem;
        padding-right: 0.5rem;
      }
    }
    .ins-list {
      margin-top: 1rem;
      ul {
        display: flex;
        width: 100%;
        justify-content: space-around;
        align-items: center;
        li {
          display: flex;
              justify-content: center;
        align-items: center;
          .icon {
            margin-right: 0.8rem;
            width: 2.3rem;
            height: 2.3rem;
            border-radius: 50%;
          }
          .name {
            font-size: 0.8rem;
          }
        }
      }
    }
  }

  .dialog-wrapper {
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.3);
    top: 0;
    left: 0;
    transition: all 0.1s 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    .dialog {
      border-radius: 0.8rem;
      background-color: #f0f0f0;
      padding: 4px;
      position: relative;
      width: 80%;
      min-height: 12rem;
      img {
      width: 100%;
      
    }
    .actions {
      height: 2rem;
      width: 100%;
      text-align: center;
    }

    }

  }

  div[class$=-wrapper] .title{
    padding-left: 0.4rem;
  }

}
</style>
